<template>
  <div>
    <h2>下拉选择框</h2>
    <p style="margin-bottom: 50px"> 对element-ui select二次封装 封装数据源,支持url、枚举、字典渲染</p>

    <el-divider content-position="left">多选</el-divider>
    <div class="demo-block">
      <div class="source">

        <div class="demo-item">
          <es-select
            v-model="value"
            dict-name="dict_area_type"
            multiple
          ></es-select>
        </div>

        <div class="demo-item">
          <es-select
            v-model="value1"
            dict-name="dict_area_type"
            multiple
            disabled
          ></es-select>
        </div>

        <div class="demo-item">
          <es-select
            v-model="value2"
            enum-name="TerminalEnum"
            multiple
            collapse-tags
          ></es-select>
        </div>

      </div>
      <div class="meta">
        <div class="description">
          <p>multiple开启多选、disabled开启禁用、collapse-tags属性将它们合并为一段文字</p>
        </div>
        <div class="hljs highlight">
          <code>
            &lt;es-select
            <br>&nbsp;&nbsp;&nbsp;&nbsp;v-model="<span class="attr">value</span>"
            <br>&nbsp;&nbsp;&nbsp;&nbsp;url="<span class="attr">/static/json/dict.json</span>"
            <br>&nbsp;&nbsp;&nbsp;&nbsp;multiple
            <br>&nbsp;&nbsp;&nbsp;&nbsp;collapse-tags
            <br>> &lt;/es-select>
          </code>
        </div>
      </div>
      <div class="demo-block-control" @click="showCode($event)">
        <i class="el-icon-caret-bottom"></i>
        <span>显示代码</span>
      </div>
      <div class="demo-block-control none" @click="hideCode($event)">
        <i class="el-icon-caret-top"></i>
        <span>隐藏代码</span>
      </div>
    </div>

    <el-divider content-position="left">单选</el-divider>
    <div class="demo-block">
      <div class="source">

        <div class="demo-item">
          <es-select
            v-model="value4"
            enum-name="TerminalEnum"
          ></es-select>
        </div>

        <div class="demo-item">
          <es-select
            show-tip
            tip-text="请选择所属终端"
            enum-name="TerminalEnum"
          ></es-select>
        </div>

      </div>
      <div class="meta">
        <div class="description">
            enum-name:封装数据源，使用枚举自动渲染组件，需后端提供枚举接口<br>
            show-tip显示提示语，tip-text自定义提示语文本
        </div>
        <div class="hljs highlight">
          <code>
            &lt;es-select
            <br>&nbsp;&nbsp;&nbsp;&nbsp;v-model="<span class="attr">value</span>"
            <br>&nbsp;&nbsp;&nbsp;&nbsp;enum-name="<span class="attr">TerminalEnum</span>"
            <br>&nbsp;&nbsp;&nbsp;&nbsp;show-tip
            <br>&nbsp;&nbsp;&nbsp;&nbsp;tip-text="<span class="attr">请选择所属终端</span>"
            <br>> &lt;/es-select>
          </code>
        </div>
      </div>
      <div class="demo-block-control" @click="showCode($event)">
        <i class="el-icon-caret-bottom"></i>
        <span>显示代码</span>
      </div>
      <div class="demo-block-control none" @click="hideCode($event)">
        <i class="el-icon-caret-top"></i>
        <span>隐藏代码</span>
      </div>
    </div>

    <el-divider content-position="left">数据返回格式</el-divider>
    <div class="demo-block">
      <div class="source">
        <span class="attr">code</span>&nbsp;&nbsp;200成功 其他失败
        <br><span class="attr"> msg</span>&nbsp;&nbsp;附带消息 请求失败时弹出msg中的消息
        <br><span class="attr">data</span>&nbsp;&nbsp;返回的数据放在data中
      </div>
      <div class="meta">
        <div class="hljs highlight">
          <code>
            {
            <br>&nbsp;&nbsp;"code":200,
            <br>&nbsp;&nbsp;"msg":"success"
            <br>&nbsp;&nbsp;"data":[
            <br>&nbsp;&nbsp;&nbsp;&nbsp;{
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"value":"1",
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"label":"男",
            <br>&nbsp;&nbsp;&nbsp;&nbsp;},
            <br>&nbsp;&nbsp;&nbsp;&nbsp;{
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"value":"2",
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"label":"女",
            <br>&nbsp;&nbsp;&nbsp;&nbsp;}
            <br>&nbsp;&nbsp;]
            <br>}
          </code>
        </div>
      </div>
      <div class="demo-block-control" @click="showCode($event)">
        <i class="el-icon-caret-bottom"></i>
        <span>显示代码</span>
      </div>
      <div class="demo-block-control none" @click="hideCode($event)">
        <i class="el-icon-caret-top"></i>
        <span>隐藏代码</span>
      </div>
    </div>

    <el-divider content-position="left">Attributes</el-divider>
    <div class="demo-block demo-table">
      <demo-table :table-data="tableData"></demo-table>
    </div>

  </div>
</template>

<script>
  import DemoTable from '../../components/module/demo-table'

  export default {
    name: 'zwTreeDemo',
    components: {DemoTable},
    data () {
      return {
        showId: 0,
        value: ["1", "3"],
        value1: ["2", "3"],
        value2: ["1","2","3","4"],
        value4: "2",
        tableData: [
          {
            param: 'v-model',
            remark: '多个值数组',
            type: 'string/number/Array',
            usable: '—',
            default: '—'
          },
          {
            param: 'data',
            remark: 'json数组',
            type: 'Array',
            usable: '—',
            default: '—'
          },
          {
            param: 'url',
            remark: '数据源地址url',
            type: 'string',
            usable: '—',
            default: '—'
          },
          {
            param: 'enum-name',
            remark: '后端枚举名称',
            type: 'string',
            usable: '—',
            default: '—'
          },
          {
            param: 'dict-name',
            remark: '字典名称',
            type: 'string',
            usable: '—',
            default: '—'
          },
          {
            param: 'multiple',
            remark: '是否多选',
            type: 'Boolean',
            usable: '—',
            default: 'false'
          },
          {
            param: 'disabled',
            remark: '是否禁用',
            type: 'Boolean',
            usable: '—',
            default: 'false'
          },
          {
            param: 'show-tip',
            remark: '单选时，是否显示提示语',
            type: 'Boolean',
            usable: '—',
            default: 'false'
          },
          {
            param: 'tip-text',
            remark: '自定义提示语文本',
            type: 'string',
            usable: '—',
            default: '请选择'
          },
          {
            param: 'collapse-tags',
            remark: '多选时是否将选中值按文字的形式展示',
            type: 'Boolean',
            usable: '—',
            default: 'false'
          },
        ]
      }
    },
    methods: {
      showCode (e) {
        e.currentTarget.parentElement.childNodes[2].style.display = 'block'
        e.currentTarget.style.display = 'none'
        e.currentTarget.parentElement.childNodes[6].style.display = 'block'
      },
      hideCode (e) {
        e.currentTarget.parentElement.childNodes[2].style.display = 'none'
        e.currentTarget.style.display = 'none'
        e.currentTarget.parentElement.childNodes[4].style.display = 'block'
      },
    }
  }
</script>

<style scoped>
  .demo-block {

  }
</style>
